<!DOCTYPE html>
<html lang="en">

{extend name="/index/header"}



{block name="mycss"}
    {css  href="__CSS__bootstrap.min.css"}
    {css  href="__INDEX__reset.css"}
    {css href="__CSS__toastr.min.css"}
{/block}



{block name="main"}
<!-- 内容区域 -->
<div class="tpl-content-wrapper">

    <div class="container-fluid am-cf">
        <div class="row">
            <div class="am-u-sm-12 am-u-md-12 am-u-lg-9">
                <div class="page-header-heading"><span class="am-icon-home page-header-heading-icon"></span> 表格 <small>Amaze UI</small></div>
                <p class="page-header-description">Amaze UI 有许多不同的表格可用。</p>
            </div>
            <div class="am-u-lg-3 tpl-index-settings-button">
                <button type="button" class="page-header-button"><span class="am-icon-paint-brush"></span> 设置</button>
            </div>
        </div>

    </div>

    <div class="row-content am-cf">


        <div class="row">


            <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
                <div class="widget am-cf">
                    <div class="widget-head am-cf">
                        <div class="widget-title am-fl">斑马线</div>
                        <div class="widget-function am-fr">
                            <a href="javascript:;" class="am-icon-cog"></a>
                        </div>
                    </div>
                    <div class="widget-body  widget-body-lg am-fr">

                        <table width="100%" class="am-table am-table-compact am-table-striped tpl-table-black " id="example-r">
                            <thead>
                            <tr>
                                <th>id</th>
                                <th>姓名</th>

                            </tr>
                            </thead>
                            <tbody>
                            {volist name="list" key="k" id="v" }

                            <tr class="gradeX">
                                <td>{$v['id']}</td>
                                <td>{$v['name']}</td>

                                <td>
                                    <div class="tpl-table-black-operation">
                                        <a href="javascript:;">
                                            <i class="am-icon-pencil"></i> 编辑
                                        </a>

                                        <button data-id="{$v['id']}" class="btn btn-sm btn-danger del-btn">删除</button>

                                    </div>
                                </td>
                            </tr>
                            {/volist}
                            <!-- more data -->
                            </tbody>
                        </table>

                    </div>
                </div>
            </div>




        </div>

    </div>
</div>

{block name="myjs"}

<script>
    $(function() {
        // 触发删除功能
        $('.del-btn').click(function () {
            var ac_id = $(this).attr('data-id');
            console.log('删除' + ac_id + '的用户');

            if (confirm('您确定要删除吗')) {
                var obj = $(this).parents('tr');
                delAjax(ac_id, obj)
            }

        });

        $('.show-btn').click(function () {
            var ac_id = $(this).attr('dat   a-id');
            console.log('查看' + ac_id + '的用户');
            showAjax(ac_id)

        });
    })


    function delAjax(id, obj){
        $.ajax({
            method : 'delete', // 请求方式
            url : '/test/' + id, // 路由+ id
            dataType : 'json',
            success : function (data){
                console.log(data);
                if (data.status) {
                    // 将指定的tr行 移除
                    obj.remove();
                    toastr.success(data.info);
                } else {
                    toastr.error(data.info, 'FBI WARNING:');
                }
            },
            error : function() {
                alert('AJAX 执行失败');
            }
        });
    }
</script>

</body>

{/block}

{/block}


</div>
</div>


{block name="jsroute"}
    {js href="__JS__jquery.min.js"}
    {js href="__JS__bootstrap.min.js"}
    {js href="__JS__toastr.min.js"}
{/block}





</html>